<!DOCTYPE html>
<!--author wrc 2021 6 11-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>城市四级联动</title>
</head>
<body>
<h3 align="center">城市四级联动</h3></br>


<form role="form">
    <div class="form-group col-sm-3">
        <label>省份 :</label>
        <select onchange="city(0)" id="selectLevelOne" class="city form-control selectpicker">
            <option value="">-- 请选择 --</option>
            <option th:each="bean,beans:${selectLevelFirst}" th:value="${bean.code}" th:text="${bean.name}"></option>
        </select>
    </div>

    <div class="form-group col-sm-3">
        <label>城市 :</label>
        <select id="selectLevelTwo" onchange="city(1)" class="city form-control selectpicker">
            <option value="">-- 请选择 --</option>
        </select>
    </div>

    <div class="form-group col-sm-3">
        <label>区域/县 :</label>
        <div><select id="selectLevelThree" onchange="city(2)" class="city form-control selectpicker">
            <option value="">-- 请选择 --</option>
        </select></div>
    </div>

    <div class="form-group col-sm-3">
        <label>镇/乡/街道 :</label>
        <div><select id="selectLevelFour" onchange="city(3)" class="city form-control selectpicker">
            <option value="">-- 请选择 --</option>
        </select></div>
    </div>
</form>

<h3 align="center"><br/>
    <hr/>
    城市查询
</h3>
</br>
<div class="form-group col-sm-12">
    <label>模糊搜索 :</label>
    <div class="same div">
        <input class="form-control" id="name">
        <div id="ap">
        </div>
    </div>
</div>

<button id="showModal" data-toggle="modal" data-target="#myModal" style="display: none;"></button>
<!-- 模态框（Modal） -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="min-width:98%;!important; min-height:800px;!important; ">
        <div class="modal-content" style="min-width:98%;!important; min-height:800px;!important; ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    百度地图
                </h4>
            </div>
            <div class="modal-body">
                <iframe src="#" id="fr" style="min-width:98%;!important; min-height:800px;!important; "></iframe>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div><!-- /.modal -->
</body>
<style>
    .form-control {
        width: 300px !important;
    }
</style>
<script src="/static/jquery.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!--在线引入-->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><!--在线引入-->
<script type="text/javascript">
    $(document).ready(function () {
        $("#name").bind("input propertychange", function cityByName() { //实时事件监听城市查询框
            var name = $("#name").val();
            $("#ap").html("");
            $.get(
                "/likeSelectName?name=" + name,
                function (obj) {
                    var htm = '<h4>查询出以下区域</h4>';
                    $.each(obj, function (i, item) {
                        var hls = "";
                        $.each(item.levelUp, function (i, items) {
                            hls += '&nbsp;&nbsp;<a href="#" onclick="showModal(\'' + items.name + '\')"> ' + items.name + '</a>';
                        });
                        var onName = null == item.levelOn ? "无" : item.levelOn.name;
                        htm += '当前查询出 <a href="#" onclick="showModal(\'' + item.name + '\')">' + item.name + '</a> ,所属 <a href="#"  onclick="showModal(\'' + item.name + '\')">' + onName + '</a></font>,当前下还有' + hls + ' </p>';
                    });
                    $("#ap").html(htm);
                },
                "json"
            );
        });
    });

    function showModal(name) { //拟态框  百度frame
        $("#fr").attr("src", "https://map.baidu.com/search/@12959220,4825334.5,12z?querytype=s&wd=" + name);
        $("#showModal").click();
    }

    function city(num) { //绑定城市下拉框
        var selectVal = $(".city").eq(num).val();
        $(".city").eq(num + 1).html("");
        $.get(
            "/resLevelUp?code=" + selectVal,
            function (obj) {
                var htm = "<option value='' >-- 请选择 --</option>";
                for (var i = 0; i < obj.length; i++) {
                    htm += ' <option value="' + obj[i].code + '" >' + obj[i].name + '</option>';
                }
                $(".city").eq(num + 1).html(htm);
            },
            "json"
        );
    }
</script>
</html>